<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<script src="../urlfmt.js"></script>

<dom-module id="som-webkit-tests">
  <template>
    <style>
    #container {
      display: flex;
      align-items: stretch;
      flex-grow: 1;
    }

    #expected,
    #actual,
    #diff {
      box-sizing: border-box;
      display: flex;
      flex-grow: 1;
      flex-direction: column;
      border: 1px solid black;
      padding: 0.5em;
      width: 33.33%;
    }

    #expectedIframes,
    #actualIframes,
    #diffIframes {
      display: flex;
      flex-grow: 1;
      flex-direction: column;
      overflow: auto;
    }

    h3 {
      margin: 0.5em 0;
    }

    iframe {
      border: 0;
      flex-grow: 1;
    }
    </style>

    <div>
      <a href$="[[allResultsUrl]]" target="_blank">All layout test results</a> -
      <a href$="[[_flakinessDashboardUrl]]"
        target="_blank">View on Flakiness Dashboard</a>
    </div>
    <div id="testName">[[testName]]</div>
    <div id="container">
      <div id="expected">
        <h3>Expected</h3>
        <div id="expectedIframes"></div>
      </div>
      <div id="actual">
        <h3>Actual</h3>
        <div id="actualIframes"></div>
      </div>
      <div id="diff">
        <h3>Diff</h3>
        <div id="diffIframes"></div>
      </div>
    </div>
  </template>
  <script src="som-webkit-tests.js"></script>
</dom-module>
